import 'package:flui/flui.dart';
import 'package:flutter/material.dart';
import 'package:fzcgx_app/common/adapter_utils.dart';
import 'package:fzcgx_app/common/assets_utils.dart';
import 'package:fzcgx_app/provider/provider_widget.dart';
import 'package:fzcgx_app/ui/order/view_model/order_release_details_view_model.dart';

class OrderReleaseDetailsPage extends StatefulWidget {
  OrderReleaseDetailsPage({Key key}) : super(key: key);

  @override
  _OrderReleaseDetailsPageState createState() =>
      _OrderReleaseDetailsPageState();
}

class _OrderReleaseDetailsPageState extends State<OrderReleaseDetailsPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ProviderWidget<OrderReleaseDetailsViewModel>(
        model: OrderReleaseDetailsViewModel(),
        builder: (context, viewModel, child) {
          return _buildBodyWidget();
        },
      ),
    );
  }

  Widget _buildBodyWidget() {
    return Stack(
      children: <Widget>[
        ClipPath(
          clipper:
              OvalBottomBorderClipper(ovalHeight: AdapterUtils.getHeight(40)),
          child: Container(
            height: AdapterUtils.getHeight(200),
            child: Container(
              child: Image.asset(
                AssetsUtils.getAssetsImagesPath(
                    'order_details_background_image.png'),
                width: AdapterUtils.screenWidth(),
                height: AdapterUtils.getHeight(200),
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
        Container(
          margin: EdgeInsets.only(top: AdapterUtils.getHeight(50)),
          child: Row(
            children: <Widget>[
              Container(
                padding: EdgeInsets.only(left: AdapterUtils.getWidth(23)),
                child: Image.asset(
                    AssetsUtils.getAssetsImagesPath('back_white.png')),
              ),
              Spacer(),
              Text('订单详情',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.w600,
                      fontSize: AdapterUtils.getSp(18))),
              Spacer(),
              SizedBox(
                width: AdapterUtils.getWidth(23),
              )
            ],
          ),
        ),
        Container(
            margin: EdgeInsets.only(top: AdapterUtils.getHeight(102)),
            width: AdapterUtils.screenWidth(),
            child: Column(
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Container(
                      child: Row(
                        children: <Widget>[
                          FLAvatar(
                            color: Color(0xFFB4E1FF),
                            width: 8,
                            height: 8,
                            text: '',
                          ),
                          SizedBox(width: AdapterUtils.getWidth(5),),
                          Container(
                              width: AdapterUtils.getWidth(47),
                              height: AdapterUtils.getHeight(8),
                              child: Center(
                                child: Container(
                                  width: AdapterUtils.getWidth(47),
                                  height: AdapterUtils.getHeight(2),
                                  color: Color(0xffB4E1FF),
                                ),
                              ))
                        ],
                      ),
                    ),
                     SizedBox(width: AdapterUtils.getWidth(5),),
                    Container(
                      child: Row(
                        children: <Widget>[
                          FLAvatar(
                            color: Color(0xFFB4E1FF),
                            width: 8,
                            height: 8,
                            text: '',
                          ),
                          SizedBox(width: AdapterUtils.getWidth(5),),
                          Container(
                              width: AdapterUtils.getWidth(47),
                              height: AdapterUtils.getHeight(8),
                              child: Center(
                                child: Container(
                                  width: AdapterUtils.getWidth(47),
                                  height: AdapterUtils.getHeight(2),
                                  color: Color(0xffB4E1FF),
                                ),
                              ))
                        ],
                      ),
                    ),
                     SizedBox(width: AdapterUtils.getWidth(5),),
                    Container(
                      child: Row(
                        children: <Widget>[
                          FLAvatar(
                            color: Color(0xFFB4E1FF),
                            width: 8,
                            height: 8,
                            text: '',
                          ),
                          SizedBox(width: AdapterUtils.getWidth(5),),
                          Container(
                              width: AdapterUtils.getWidth(47),
                              height: AdapterUtils.getHeight(8),
                              child: Center(
                                child: Container(
                                  width: AdapterUtils.getWidth(47),
                                  height: AdapterUtils.getHeight(2),
                                  color: Color(0xffB4E1FF),
                                ),
                              ))
                        ],
                      ),
                    ),
                     SizedBox(width: AdapterUtils.getWidth(5),),
                    Container(
                      child: Row(
                        children: <Widget>[
                          FLAvatar(
                            color: Color(0xFFB4E1FF),
                            width: 8,
                            height: 8,
                            text: '',
                          ),
                          SizedBox(width: AdapterUtils.getWidth(5),),
                          Container(
                              width: AdapterUtils.getWidth(47),
                              height: AdapterUtils.getHeight(8),
                              child: Center(
                                child: Container(
                                  width: AdapterUtils.getWidth(47),
                                  height: AdapterUtils.getHeight(2),
                                  color: Color(0xffB4E1FF),
                                ),
                              ))
                        ],
                      ),
                    ),
                    SizedBox(width: AdapterUtils.getWidth(5),),
                           FLAvatar(
                            color: Color(0xFFB4E1FF),
                            width: 8,
                            height: 8,
                            text: '',
                          ),
                  ],
                ),
              ],
            ))
      ],
    );
  }
}

//底部弧度小部件
class OvalBottomBorderClipper extends CustomClipper<Path> {
  OvalBottomBorderClipper({this.ovalHeight = 40});

  final double ovalHeight;

  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0, 0);
    path.lineTo(0, size.height - ovalHeight);
    path.quadraticBezierTo(
        size.width / 4, size.height, size.width / 2, size.height);
    path.quadraticBezierTo(size.width - size.width / 4, size.height, size.width,
        size.height - ovalHeight);
    path.lineTo(size.width, 0);
    path.lineTo(0, 0);
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }
}
//  FLAvatar(
//                             color: Color(0xFFB4E1FF),
//                             width: 8,
//                             height: 8,
//                             text: '',
//                           ),
//                           SizedBox(
//                             height: AdapterUtils.getHeight(14),
//                           ),
//                           Text('待合作',
//                               textAlign: TextAlign.center,
//                               style: TextStyle(
//                                   color: Color(0xffB4E1FF),
//                                   fontWeight: FontWeight.w700,
//                                   fontSize: AdapterUtils.getSp(14))),

// Container(
//                             width: AdapterUtils.getWidth(47),
//                             height: AdapterUtils.getHeight(8),
//                             child: Center(
//                               child: Container(
//                                 width: AdapterUtils.getWidth(47),
//                                 height: AdapterUtils.getHeight(2),
//                                 color: Color(0xffB4E1FF),
//                               ),
//                             ))
